<template>
    <div class="intro-wrap">
      <div class="intro border-bottom">
          <router-link to="/comment/1"  tag="div" class="comments">
            <div>
              <span class="comments-score">4.9</span>
              <span class="comments-text">分</span>
              <span class="comments-desc">很棒</span>
            </div>
            <div>
              <span class="comments-total">3176条评论</span>
              <span class="comments-total">6条攻略</span>
              <span class="iconfont intro-rightarrow">&#xe62d;</span>
            </div>
          </router-link>
          <router-link to="/" tag="div" class="intro-info">
            <div>
              <span class="intro-info-title">景点简介</span>
            </div>
            <div>
              <span class="intro-info-text">开放时间、贴士</span>
              <span class="iconfont intro-rightarrow">&#xe62d;</span>
            </div>
          </router-link>
      </div>

      <div class="intro-address">
        <p class="intro-address-txt">
          <!--<span class="intro-address-icon"></span>-->
          <span class="iconfont intro-rightarrow">&#xe62b;</span>
          江苏省南京玄武区瓮仲路四方城8号
          <span class="iconfont intro-rightarrow">&#xe62d;</span>
        </p>
      </div>

    </div>

</template>

<script>
export default {
  props: {},
  data () {
    return {}
  },
  methods: {},
  components: {},
  computed: {}
}
</script>

<style lang="stylus" scoped>
.intro-wrap
  padding :0.1rem 0.2rem 0.2rem
  .intro
    display :flex
    padding-bottom :0.2rem
    div.comments,div.intro-info
      flex :auto
      width :50%
      position: relative
      a
        position :absolute
        width :100%
        height :100%
    .comments
      .comments-score
        font-size: .44rem;
        color: #ff8300;
        line-height: .44rem;
      .comments-text
        font-size: .28rem;
        color: #ff8300;
        line-height: .48rem;
      .comments-desc
        font-size: .28rem;
        color: #ff8300;
        line-height: .48rem;
        margin-left: .2rem;
      .comments-total
        font-size: .24rem;
        color: #9e9e9e;
        line-height: .32rem;
        margin-right: .2rem;
    .intro-info
      .intro-info-title
        font-size: .28rem;
        color: #212121;
        line-height: .48rem;
        padding-left: .3rem;
      .intro-info-text
        color: #9e9e9e;
        font-size: .24rem;
        padding-left: .3rem;
    .intro-rightarrow
      position: absolute;
      top: .3rem;
      right: .2rem;
      color: #9e9e9e;
      font-size: .24rem;
    .intro-address
      display: block;
      position: relative;
      padding: .2rem 0;
      line-height: .36rem;
      color: #212121;
      .intro-address-txt
        padding-right: .56rem;
        position: relative;
        padding-left: .56rem;
        .intro-address-icon
          display: block;
          height: 100%;
          line-height: 100%;
          position: absolute;
          left: 0;
          top: .16rem;
          margin-top: -.16rem;
          margin-right: .2rem;
          color: #9e9e9e;
          font-size: .36rem;
          background-image :url('/static/images/detail-icon-1.png')

</style>
